import { useCatStore } from "../stores/catStore";

export const CatBox2 = () => {
  // 通过useCatStore()获取部分状态，会造成不必要的重渲
  // 此组件不能使用 auto state Generator 来简化获取，因为bigCats是第二层的数据，useCatStore.use只能返回第一层数据
  const {
    cats: { bigCats },
  } = useCatStore();

  return (
    <div className="box">
      <h1>Partial States from catStore</h1>
      <p>big cats: {bigCats}</p>
      <p>测试重渲染：{Math.random()}</p>
    </div>
  );
};
